<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/login.css" />
    <link rel="stylesheet" href="css/footer&cbl.css" />
    <link rel="stylesheet" href="css/daohang.css" />
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
    <script type="text/javascript" src="js/bootstrap.js" ></script>
    <script type="text/javascript" src="js/templet.js" ></script>
    <script type="text/javascript" src="js/hp.js" ></script>
    <script type="text/javascript" src="js/axios.js" ></script>
    <title></title>
</head>
<body class="login-body" >
<div id="main" v-cloak>
    <nav class=" navbar-inverse" id="daohang">
        <div class="daohang">
            <div class="navbar-header clearfix">
                <button type="button" class="zd" id="zd" >
                    <span class="glyphicon glyphicon-align-justify"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="daohangtiao">
                <span class="close"><a href="index.html"><i></i></a></span>
            </div>
        </div>
        <div id="box">
            <div class="box1 col-sm-2 col-xs-2">
                <span id="X" class="glyphicon glyphicon-remove pull-right" ></span>
            </div>
            <div class="box2 col-sm-10 col-xs-10" >
                <ul id="ul1"class="clearfix">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="templet.html">模板</a></li>
                    <li><a href="setmeal.html">套餐</a></li>
                    <li><a href="example.html">案例</a></li>
                    <li id="wd"><a>文档<i class="glyphicon glyphicon-menu-right"></i></a></li>
                    <li id="gy"><a>关于<i class="glyphicon glyphicon-menu-right"></i></a></li>
                </ul>
                <div id="wd1">
                    <ul>
                        <li id="fanhui1"><a>返回上一级</a></li>
                        <li><a>教程中心</a></li>
                        <li><a>建站资讯</a></li>
                        <li><a>更新日志</a></li>
                    </ul>
                </div>
                <div id="gy1" >
                    <ul id="ul2">
                        <li id="fanhui2"><a>返回上一级</a></li>
                        <li id="gcxx"><a>公司信息<i class="glyphicon glyphicon-menu-right"></i></a></li>
                        <li><a>荣誉资质</a></li>
                        <li><a>联系客服</a></li>
                    </ul>
                </div>
                <div id="gc" >
                    <ul >
                        <li id="fanhui3"><a>返回上一级</a></li>
                        <li><a>公司介绍</a></li>
                        <li><a>服务条款</a></li>
                        <li><a>法律声明</a></li>
                        <li><a>可接受服务</a></li>
                        <li><a>免责声明</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <div class="main">
        <div class="container">
            <div class="c2">
                <!--					<a href=""></a><span>-->
                <!--						<img src="/img/qifeiye.png" />-->
                <!--					</span></a>-->
                <p>社交账号绑定</p>
            </div>
            <div class="c3">
                <div v-if="commonlogindiv">
                    <form action="/gorillaSocial/social/binding" method="post" >
                        <div>
                            <div  id="commonModel" >
                                <div class="form-group">
                                    <label for="socialaccount">您的社交账号</label>
                                    <input type="text" class="form-control" id="socialaccount" name="socialaccount"  readonly  v-model="socialaccount">
                                </div>
                                <div class="form-group">
                                    <label for="usernameoremail">关联账号</label>
                                    <input type="text" class="form-control" id="usernameoremail" name="username" placeholder="请输入您的账号">
                                </div>
                                <div class="form-group">
                                    <label for="password">密码</label>
                                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入您的密码">
                                </div>
                            </div>
                            <div class="c3-1">
                                <button id="bind" type="submit" class="btn btn-default btn1">绑定</button>
                                <a href="register.html" type="button" class="btn btn-default btn2">注册</a>
                            </div>
                        </div>
                    </form>
                </div>


            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#main',
        data: {
            socialaccount:"",
            smslogindiv:false,
            commonlogindiv:true,
            socialInfo:{
                username:"",
                password:""
            }
        },
        methods:{
            changeSms:function () {
                this.smslogindiv = true;
                this.commonlogindiv = false;
            },
            changeCommon:function(){
                this.smslogindiv = false;
                this.commonlogindiv = true;
            },
            getUserSocialInfo(){
                var _this = this;
                axios.get("/gorillaSocial/social/userinfo").then(res=>{
                    _this.socialaccount = res.data.nickname;
                    console.log(JSON.stringify(_this.socialaccount));
                })
            },
        },
        mounted(){
            this.getUserSocialInfo();
        }
    })
</script>
</html>
